<template>
  <div class="app">
<van-swipe :autoplay="3000">
  <van-swipe-item v-for="(item, index) in images" :key="index">
    <img :src="`http://liufusong.top:8080${item.imgSrc}`" alt="">
  </van-swipe-item>
</van-swipe>

<van-search class="search" v-model="value" placeholder="请输入小区或地址"  background='none' >
   <template #label>
    <div @click="onSearch">上海</div>
  </template>
  </van-search>
<van-icon name="guide-o" class="guide"/>
<van-grid icon-size='60px' :border='false'>
  <van-grid-item :icon="imgsrc1" text="整租"  />
  <van-grid-item :icon="imgsrc2" text="合租" />
  <van-grid-item :icon="imgsrc3" text="地图找房" />
  <van-grid-item :icon="imgsrc4" text="去出租" to="/gotorent"/>
  </van-grid>
  <div class="rent">
<div class="more">
  <p>租房小组</p>
<a href="">更多</a>
</div>
<div class="des">
<div class="left">
  <p>家住回龙观</p>
  <p class="bottom">归属的感觉</p>
</div>
<div class="right">
  <p>宜居四五环</p>
  <p class="bottom">大都市生活</p>
</div>
</div>

<div class="des">
<div class="left">
  <p>喧嚣三里屯</p>
  <p class="bottom">繁华的背后</p>
</div>
<div class="right">
  <p>比邻十号线</p>
  <p class="bottom">地铁心连心</p>
</div>
</div>
  </div>

  </div>
</template>

<script>
import request from '@/utils/request'
export default {
  name: 'HaokeHouse',

  data () {
    return {
      images: [],
      value: '',
      imgsrc1: '',
      imgsrc2: '',
      imgsrc3: '',
      imgsrc4: ''
    }
  },

  mounted () {

  },
  created () {
    this.clickFn()
    this.onSearch()
  },

  methods: {
    async clickFn () {
      const res = await request({
        url: '/home/swiper'
      })
      // console.log(res)
      this.images = res.body
    },
    async onSearch () {
      const res = await request({
        url: '/area/city'
      })
      console.log(res)
    }
  }
}
</script>

<style lang="less" scoped>
img{
  width: 100%;
  height: 100%;
}
/deep/.van-search{
  background-color: #fff;
}
.app{
  position: relative;
}
.search{
  position: absolute;
  left:10px;
  top:20px;
  width: 310px;
  height: 34px;
  margin-left: 15px;
}
.guide{
position: absolute;
top:30px;
right:10px;
}
.rent{
  height: 185px;
  background-color: #f6f5f6;
  width: 100%;
  .more{
    height: 55px;
    p{
      float: left;
      margin-left:10px;
      margin-top: 15px;
      font-size: 16px;
      font-weight: bold;
    }
    a{
      float: right;
       margin-right:10px;
      margin-top: 15px;
      color: #797d81;
      font-size: 14px;
    }
  }
  .des{
    display: flex;
    .left,
    .right{
      width: 172px;
      height: 60px;
      background-color:#fff;
      font-size: 12px;
      margin:0  8px;
border-radius: 5px;
margin-bottom: 5px;
.bottom{
        margin-top: -15px;
      }

p{
margin-left: 70px;
}
    }

  }
}
</style>
